<template>
    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <div class="homeDermatology">
            <div v-for="(item, index) in newpifu" :key="index" @click="btnvanListDiv(item)">
                <img v-lazy="item?.img" alt="" />
                <p><span class="three">三甲</span><b>{{ item.nosocomium }}</b></p>
                <p>
                    {{ item.name }}<span class="state">{{ item.state }}</span>
                </p>
                <p>{{ item.administrativeOffice }}</p>
                <h4>￥{{ item.price }}起</h4>
            </div>
        </div>
    </van-list>


</template>
<script lang="ts" setup>
// @ts-ignore
import { ref } from "vue";
import { useRouter } from 'vue-router'
// @ts-ignore
import instance from '../../axios/index.ts';
// @ts-ignore
import { useCounterStore } from '../../pinia/index.ts'//引入pinia
const store = useCounterStore()
interface Item {
    img: string;
    name: string;
    state: string;
    nosocomium: string;
    department: string;
    good: string;
    Ordertaking: string;
    interrogation: string;
    price: string;
    recover: string;
    administrativeOffice: string;
}
const loading = ref(false);
const finished = ref(false);
let page = ref(1);//当前页
let pageSize = ref(10);//一页几条
const newpifu = ref<Item[]>([])//皮肤科数据
const router = useRouter()

const onLoad = () => {
    // 异步更新数据
    // setTimeout 仅做示例，真实场景中一般为 ajax 请求
    page.value += 1
    setTimeout(() => {
        // 皮肤 
        instance.post('/api/homeall').then((res: { data: { data: Item[]; }; }) => {
            let shuju = res.data.data
            shuju.forEach((item) => {
                if (item.department == '耳鼻咽喉科') {
                    newpifu.value.push(item)
                    let newarr = (newpifu.value.splice(page.value * pageSize.value, 10))
                    newpifu.value = [...newarr, ...newpifu.value]
                }
            })
        })
        // 加载状态结束
        loading.value = false;

        // 数据全部加载完成
        if (newpifu.value.length >= 54) {
            finished.value = true;
        }
    }, 0);
};

// 点击数据 
const btnvanListDiv = (item: Item) => {
    store.data = item
    router.push('/consultationDetails')
};

</script>
<style scoped lang="scss">
.homeDermatology {
    display: flex;
    display: flex;
    flex-wrap: wrap;
    background: #f5f5f5;
    padding-left: .05rem;
    div {
        padding-left: .1rem;
        width: 1.65rem;
        margin-top: .1rem;
        // border: 0.01rem solid #ccc;
        margin-left: .05rem;
        background: #ffff;
        border-radius: .1rem;

        p {
            width: 95%;
            white-space: nowrap;
            /* 文字不换行 */
            overflow: hidden;
            /* 隐藏溢出的内容 */
            text-overflow: ellipsis;
            /* 使用省略号表示被截断的文字 */
            padding-left: .1rem;
        }

        img {
            width: 100%;

        }

        h4 {
            color: red;
            padding-left: .1rem;
            padding-bottom: .1rem;
        }
    }

    .three {
        width: 0.37rem;
        height: 0.2rem;
        display: inline-block;
        border: 1px solid blue;
        text-align: center;
        line-height: 0.2rem;
        color: blue;
        font-size: .13rem;
    }

    .state {
        width: 0.37rem;
        height: 0.2rem;
        margin-left: .1rem;
        color: #797979;
    }
}
</style>
